import React, { Component, useState, useRef } from "react";
import { Modal } from "antd";
import VehicleNo from "components/layoutc/VehicleNo";
import JMap2 from "components/amap/JMap2";
import JTab from "components/layoutc/JTab";
import PlayBack from "./Playback";
import Realtimevideo from "./Realtimevideo";
import "./caralldialog.less";

const CarallDialog = props => {
  const { handleCancel, visible, carObj } = props;
  const [ontab, setOntab] = useState(0);
  const jmap2Ref = useRef();
  function geTabTValue(params) {
    setOntab(params);
    if (params !== 1) {
      jmap2Ref.current.setAddMarker();
    }
  }
  function searchHander() {
    jmap2Ref.current.setMarkerCar();
  }
  function setPlay() {
    // console.log("dialog...play", jmap2Ref.current);
    jmap2Ref.current.setGjHandler("play");
  }
  function setPause() {
    jmap2Ref.current.setGjHandler("pause");
  }
  let tabdiv;
  switch (ontab) {
    case 0:
      tabdiv = <div>hhhhh</div>;

      break;
    case 1:
      tabdiv = (
        <PlayBack
          searchHander={searchHander}
          setPlay={setPlay}
          setPause={setPause}
        ></PlayBack>
      );

      break;
    case 2:
      tabdiv = <Realtimevideo></Realtimevideo>;
    default:
      break;
  }
  return (
    <div>
      <Modal
        title="车辆全景图"
        width="80%"
        bodyStyle={{ padding: "0px" }}
        visible={visible}
        footer={null}
        onCancel={handleCancel}
      >
        <div className="j-dialog-con">
          <div className="jsub-title">
            <div className="font-normal font-color-normal item">
              车牌号码:
              <div className="carno">
                <VehicleNo carObj={carObj.carObj} />
              </div>
            </div>
            <div className="font-normal font-color-normal item">
              所属平台:<span>亿城云平台</span>
            </div>
            <div className="font-normal font-color-normal item">
              业户:<span>洛南市曙光公司</span>
            </div>
            <div className="font-normal font-color-normal item">
              首次入网时间:<span>2019-08-09 14:10</span>
            </div>
            <div className="font-normal font-color-normal item">
              最后上线时间:<span>2019-08-09 14:10</span>
            </div>
            <div className="font-normal font-color-normal item">
              所属行业:<span>班线客运</span>
            </div>
          </div>
          <div className="d-container">
            <div className="map-cn">
              <JMap2 markers={carObj.pos} ref={jmap2Ref}></JMap2>
            </div>
            <div className="right-con">
              <div className="tab-cn">
                <JTab
                  tabs={[
                    "基本信息",
                    "轨迹查看",
                    "实时视频",
                    "报警信息",
                    "交互记录"
                  ]}
                  onTab={geTabTValue}
                />
                {tabdiv}
              </div>
            </div>
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default CarallDialog;
